<template>
  <el-dialog
    :title="'用户[' + user_name + ']绑定角色'"
    :visible.sync="dialog_visible"
  >
    <div style="max-height: 500px; overflow-y: scroll">
      <el-tree
        ref="tree"
        :data="rolesData"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultCheckedKeys"
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRoleIdByUser,bindRoles } from "@/api/right";

import { getlist_all } from "@/api/right_roles";

import g from "@/utils/utilFn";
export default {
  name: "userBindRoles",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    user_id: {
      type: Number,
      default: 0,
    },
    user_name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {  
      rolesData: [],
      defaultCheckedKeys: [],
      defaultProps: {
        children: "children",
        label: "role_name",
      },
    };
  },
  computed: {
    dialog_visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  created() {
    // this.getList();
  },
  mounted() {
    // this.getList();
  },
  watch: {
    user_id(newValue, oldValue) {
      if (newValue) {
        this.defaultCheckedKeys = [];
        this.rolesData = [];
        this.getList(() => {
          this.getRoleIdByUser(newValue);
        });
      }
    },
  },
  methods: {
    getList(fn) {
      this.listLoading = true;
      getlist_all().then((response) => {
        var data = response.data;
        console.log(data);
        this.rolesData = data;
        fn && fn.apply();
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    }, 
    getRoleIdByUser(user_id) {
      this.listLoading = true;
      getRoleIdByUser({ user_id }).then((response) => {
        var data = response.data;
        console.log(data);
        this.defaultCheckedKeys = g.changeToArrays(data, "role_id");
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    cancel() {
      this.dialog_visible = false;
    },
    submit() {
      var data = this.$refs["tree"].getCheckedKeys();
      var data1 = this.$refs["tree"].getHalfCheckedKeys();    
      var data2 = g.merge(data, data1);
      var role_ids = data2.join(",")||'';  
        
      var param = {
        user_id: this.user_id,
        role_ids: role_ids,
      };
      bindRoles(param).then((response) => {
        if (response.data > 0) {
          setTimeout(() => {
            this.dialog_visible = false;
            this.$message({
              type: "success",
              message: "用户角色绑定成功!",
            });
            // this.$emit("success", param);
          }, 200);
        } else {
          this.$message({
            type: "info",
            message: "用户角色绑定失败",
          });
        }
      });
    },
  },
};
</script>
